<template>
	<div class="big-container" style="padding: 20px 0;">
		<div class="container-content inner-box">
			<div class="start-layout top-bread">
				<i class="el-icon-location"></i>
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div style="padding-top: 20px;">
				<div class="detail-title">{{ info.title }}</div>
				<div class="detail-date">
					发布时间：{{ info.releaseTime }}&ensp;&ensp;&ensp;&ensp;文章来源：{{ info.releaseUnit ? info.releaseUnit :
						'——' }}
				</div>
				<div class="detail-content" v-html="info.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	searchInfo
} from "@/api/index";
export default {
	data() {
		return {
			info: {}
		}
	},
	created() {
		searchInfo(this.$route.query.id).then(res => {
			this.info = res.data
		})
	},
	mounted() {
		window.scrollTo(0, 0);
	},
	methods: {

	}
}
</script>

<style scoped>
::v-deep .el-icon-location {
	color: #015293 !important;
	font-weight: 400 !important;
	font-size: 22px !important;
	margin-right: 6px;
}

::v-deep .el-icon-arrow-right {
	color: #015293 !important;
	font-weight: 400 !important;
	font-size: 18px !important;
}

/* 不被选中时的颜色 */
.el-breadcrumb ::v-deep .el-breadcrumb__inner {
	color: #015293 !important;
	font-weight: 400 !important;
	font-size: 18px !important;
}

/* .detail-content {
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: pre-wrap;
	word-break: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
} */

::v-deep .detail-content * {
	max-width: 100% !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
	/* white-space: pre-wrap !important; */
	box-sizing: border-box !important;
	word-break: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}

::v-deep .detail-content img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin: 10px auto;
	object-fit: contain;
}

/* 处理表格溢出 */
::v-deep .detail-content table {
	width: 100% !important;
	border-collapse: collapse;
	overflow-x: auto;
	display: block;
}
</style>